<template>
<div>
  <el-input
      placeholder="请输入部门名称进行搜索..."
      v-model="filterText"
      prefix-icon="el-icon-search">
  </el-input>

  <el-tree
      :data="deps"
      :props="defaultProps"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree">
    <span class="custom-tree-node"
          style="width: 700px"
          slot-scope="{ node, data }">
        <span>{{ data.name }}</span>
        <span style="float: right">
          <el-button
              class="depBtn"
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="append(data)">
            添加
          </el-button>
          <el-button
              class="depBtn"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="remove(data)">
            删除
          </el-button>
        </span>
      </span>
  </el-tree>

  <el-dialog
      title="添加部门"
      :visible.sync="dialogVisible"
      width="30%">
    <div>
      <tr>
        <td style="display: inline-block;margin-right: 10px"><el-tag>上级部门:</el-tag></td>
        <td>{{parentName}}</td>
      </tr>
      <tr>
        <td><el-tag>部门名称:</el-tag></td>
        <td><el-input v-model="dep.name" prefix-icon="请输入部门名称"></el-input></td>
      </tr>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "DepMana",
  data(){
  return{
      parentName:'',//父级部门名称
      dep:{
      parentId:-1,
      name:''
    },
    dialogVisible:false,
    deps:[],
    filterText:'',
    defaultProps: {
      children: 'children',
      label: 'name'
    }
  }
  },
  methods:{
    initDeleteDeps(f,deps,id){
      for (let i = 0; i < deps.length; i++) {
        let d = deps[i]
      if(d.id === id){
        deps.splice(i,1)
        if(d.length===0){
          f.isParent=false
        }
        }else {
        this.initDeleteDeps(d,d.children,id)
      }
      }
    },
    remove(data){
     if(data.isParent){ //判断删除的是不是父级部门
       this.$message.error('不能删除父级部门')
     }else {
       this.$confirm('是否要删除' + data.name +'部门, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         this.deleteRequest('/system/basic/department/delete?id=' + data.id).then(res=>{
           if(res){
             this.initDeleteDeps(null,this.deps,data.id)
           }
         })
       }).catch(() => {
         this.$message({
           type: 'info',
           message: '已取消删除'
         });
       });
     }
    },
    append(data){ //点击添加按钮
      //把点击树形控件的id给dep对象中的父级部门id
      this.dep.parentId = data.id
      this.dialogVisible=true
      //点击树型控件的节点的名称赋值给父级部门名称
      this.parentName = data.name //上级部门的名称
    },
    initDep(){
      this.dep={
        parentId:-1,
        name:''
      }
      this.parentName = ''
    },
    addTree(deps,dep){
      for (let i = 0; i < deps.length; i++) {
        let d = deps[i]
        if(d.id === dep.parentId){ //判断点击的部门id跟用户新增的父级id是否相同
          d.children = d.children.concat(dep) //把用户新增的部门数据插入树型控件
          if(d.children.length>0){
            d.isparent=true
          }
        }else { //递归
          this.addTree(d.children,dep) //如果这层不是就往下层找，一层一层往下找
        }
      }
    },
    add(){//点击添加确定按钮
      this.postRequest('/system/basic/department/add',this.dep).then(res=>{
        if(res){
          this.initDep()//1.初始化dialog的数据为空
          //把要添加的部门插入树形控件  res.obj用户添加的部门数据
          this.addTree(this.deps,res.obj)
          this.dialogVisible = false
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    initDeps(){
      this.getRequest('/system/basic/department/list').then(res=>{
        if (res){
          this.deps = res
        }
      })
    }
  },
  watch:{ //监听搜索框的值
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
  this.initDeps()
  }
}
</script>

<style scoped>
.depBtn{
  padding: 2px;
}
</style>